<script setup lang="ts">
import { pageUrl } from '@/utils/constants'
import { onShow } from '@dcloudio/uni-app'
import { postPayNotifyApi } from '@/api/pay'
import { ref } from 'vue'

// 获取页面参数
const query = defineProps<{
  id: number | string
  pay_way: string
}>()

const isPay = ref(false)

const checkPay = () => {
  if (query.pay_way === 'balance') {
    isPay.value = true
    return
  }

  postPayNotifyApi({
    id: Number(query.id),
    pay_way: query.pay_way,
  })
    .then(() => {
      isPay.value = true
    })
    .catch((err) => {
      console.warn(err)
      if (err.errMsg == 'requestPayment:fail cancel') {
        uni.showToast({
          title: 'Payment cancelled',
          icon: 'none',
        })
      } else {
        uni.showToast({
          title: err.data.msg ? err.data.msg : 'Payment incomplete',
          icon: 'none',
        })
      }
      setTimeout(() => {
        uni.redirectTo({
          url: `${pageUrl['order-list']}`,
        })
      }, 500)
    })
}

onShow(() => {
  checkPay()
})
</script>

<template>
  <scroll-view enable-back-to-top class="viewport" scroll-y>
    <!-- 订单状态 -->
    <view class="overview" v-if="isPay">
      <view class="status icon-checked">Payment Successful</view>
      <view class="buttons">
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`${pageUrl['index']}`"
          open-type="switchTab"
        >
          Back to Home
        </navigator>
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`${pageUrl['order-detail']}?id=${query.id}`"
          open-type="redirect"
        >
          View Order
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.viewport {
  background-color: #f7f7f8;
}

.overview {
  line-height: 1;
  padding: 50rpx 0;
  color: #fff;
  background-color: #ff7c22;

  .status {
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
  }

  .status::before {
    display: block;
    font-size: 110rpx;
    margin-bottom: 20rpx;
  }

  .buttons {
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
  }

  .button {
    text-align: center;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #fff;

    &:first-child {
      width: 200rpx;
      border-radius: 64rpx;
      border: 1rpx solid #fff;
    }
  }
}
</style>
